<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery1.9.0.min.js"></script>
<script src="${pageContext.request.contextPath }/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jQuery-jcDate.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/jcDate.css" media="all" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/xcConfirm.css"/>
<script type="text/javascript">
	$(document).ready(function(){});
	
	
	
	//与后台交互的ajax
	function showTransitInfo(){
   		$.ajax({
   			url:'showTransitInfoAction.action',//请求的远程url
   			data:$("#actionForm").serialize(),//发送到服务器的数据
   			type:"POST",//默认值: "GET")。请求方式 ("POST" 或 "GET")
   			dataType:"json",//服务器返回的数据类型，有几种返回类型：xml,html,script,json,text(默认)
   			success:function(data){ //请求成功后的回调函数
   				var map = eval('('+data+')');
			    if(map.transitInfo != null){
			    	 $("#detail").show();
			    	 var detail = "上一站:" + map.transitInfo.befstation + "-----当前站:" + map.transitInfo.currstation + "-----下一站:" + map.transitInfo.nextstation;
			    	 $("#css-textarea").val(detail)
			     }else{
			    	 $("#css-textarea").val("没有匹配到结果，请确认订单号是否正确");
			     }
			}
   		});
	}
</script>
<style type="text/css">
  div{margin-bottom: 40px;margin-top: 20px;}
  thead{background: url(${pageContext.request.contextPath }/img/thead.png)}
  input{height: 25px;}
  td{height:35px; }
  .chaxun-td{background-image:url(${pageContext.request.contextPath }/img/chacunclick.png) }
  .label-class{background-image:url(${pageContext.request.contextPath }/img/chaxun.png) }
  .edit-a{color: #000000}
  #form{top: 10%;left: 10%;width: 20%;height: 30%}
  a{text-decoration: none;color: #FFFFFF}
</style>
</head>
<body>
    <div>
	    <form id="actionForm" method="post">
		    <div>
		      <div>
		         <table width="100%">
		          <tr><td><label style="font-size: 16px">查询物流详情</label></td></tr>
		          <tr>
		             <td width="45%">
			             <label style="font-size: 16px">订单编号：
			             <input type="text" placeholder="请输入订单编号" name="transitid"></input>
			             </label>
			             <label class="chaxun-td" onclick="showTransitInfo()"><a href="#">查询</a></label>
		             </td>
		          </tr>
		        </table>
		      </div>
		      <div id="detail" style="display: none">
		         <textarea id="css-textarea" rows="15" cols="70" disabled="disabled"></textarea>
		    </div>
		    </div>
		    
	    </form>
    </div>
</body>
</html>